<template>
    <div
        class="area-picker"
        v-if="showAreaPicker"
    >
        <div class="area-picker-main">
            <div class="area-picker-result">当前选择：{{provinceActiveName}} {{cityActiveName}} {{areaActiveName}}</div>
            <div class="area-picker-box province">
                <div
                    class="area-picker-item"
                    v-for="(item,index) of provinceList"
                    :key="index"
                    :class="provinceActiveId == item.id ? 'active':''"
                    @click="selectProvince(item.id,item.name)"
                >{{item.name}}</div>
            </div>
            <div
                class="area-picker-box city"
                v-if="cityList.length>0"
            >
                <div
                    class="area-picker-item"
                    v-for="(item,index) of cityList"
                    :key="index"
                    :class="cityActiveId == item.id ? 'active':''"
                    @click="selectCity(item.id,item.name)"
                >{{item.name}}</div>
            </div>
            <div
                class="area-picker-box area"
                v-if="areaList.length>0"
            >
                <div
                    class="area-picker-item"
                    v-for="(item,index) of areaList"
                    :key="index"
                    :class="areaActiveId == item.id ? 'active':''"
                    @click="selectArea(item.id,item.name)"
                >{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AreaPicker',
    props: {
        showAreaPicker: Boolean
    },
    data() {
        return {
            provinceActiveId: null,
            cityActiveId: null,
            areaActiveId: null,
            provinceList: [],
            cityList: [],
            areaList: [],
            provinceActiveName: '',
            cityActiveName: '',
            areaActiveName: ''
        }
    },
    mounted() {
        this.getProvince()
    },
    methods: {
        getProvince() {
            let postData = this.qs.stringify({
                parent_id: 0
            })
            this.axios.post('/api/region/child.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.provinceList = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getCity(id) {
            let postData = this.qs.stringify({
                parent_id: id
            })
            this.axios.post('/api/region/child.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.cityList = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getArea(id) {
            let postData = this.qs.stringify({
                parent_id: id
            })
            this.axios.post('/api/region/child.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    if (data.data.length == 0) {
                        const selectData = {
                            provinceActiveId: this.provinceActiveId,
                            cityActiveId: this.cityActiveId,
                            areaActiveId: this.areaActiveId,
                            provinceActiveName: this.provinceActiveName,
                            cityActiveName: this.cityActiveName,
                            areaActiveName: null
                        }
                        this.$emit('selectResult', selectData)
                        this.$emit('closePicker')
                    } else {
                        this.areaList = data.data
                    }
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        selectProvince(id, name) {
            this.cityList = []
            this.areaList = []
            this.provinceActiveId = id
            this.provinceActiveName = name
            this.getCity(id)
        },
        selectCity(id, name) {
            this.cityActiveId = id
            this.cityActiveName = name
            this.getArea(id)
        },
        selectArea(id, name) {
            this.areaActiveId = id
            this.areaActiveName = name
            const selectData = {
                provinceActiveId: this.provinceActiveId,
                cityActiveId: this.cityActiveId,
                areaActiveId: this.areaActiveId,
                provinceActiveName: this.provinceActiveName,
                cityActiveName: this.cityActiveName,
                areaActiveName: this.areaActiveName
            }
            this.$emit('selectResult', selectData)
            this.$emit('closePicker')
        }
    }
}
</script>

<style lang="stylus" scoped>
.area-picker
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0, 0, 0, 0.7)
    .area-picker-main
        position fixed
        top 5.3rem
        left 0
        right 0
        bottom 0
        background #fff
        .area-picker-result
            padding 0 0.37rem
            height 1.11rem
            line-height 1.11rem
            font-size 0.38rem
            color #333
            border-bottom 1px solid #ccc
            box-sizing border-box
        .province
            position absolute
            top 1.11rem
            left 0
            right 66.66%
            bottom 0
            overflow scroll
            -webkit-overflow-scrolling touch
            border-right 1px solid #e5e5e5
        .city
            position absolute
            top 1.11rem
            left 33.33%
            right 33.33%
            bottom 0
            overflow scroll
            -webkit-overflow-scrolling touch
            border-right 1px solid #e5e5e5
        .area
            position absolute
            top 1.11rem
            left 66.66%
            right 0
            bottom 0
            overflow scroll
            -webkit-overflow-scrolling touch
        .province .area-picker-item, .city .area-picker-item, .area .area-picker-item
            line-height 1.11rem
            padding 0 0.18rem
            font-size 0.33rem
            color #666
            overflow hidden
            border-bottom 1px solid #e5e5e5
        .province .active, .city .active, .area .active
            color #d7463c
</style>
